<template>
  <div>
    <el-row>
      <div class="up-content">
        <el-col :span="8">
          <el-date-picker
            v-model="searchDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="上课时间"
            end-placeholder="下课时间"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            :default-time="['8:00:00', '10:00:00']"
          ></el-date-picker>
        </el-col>

        <el-col :span="4" :offset="3">
          <el-select v-model="searchCondition.classId" clearable placeholder="班级选择">
            <el-option
              v-for="item in classOptions"
              :key="item.classId"
              :label="item.className"
              :value="item.classId"
            ></el-option>
          </el-select>
        </el-col>

        <el-col :span="8" :offset="1">
          <el-input
            @keyup.enter.native="getCourseList"
            placeholder="请输入内容"
            clearable
            v-model="searchCondition.searchParam"
            class="input-with-select"
            @focus="getKey"
          >
            <el-select
              filterable
              clearable
              v-model="searchCondition.type"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option label="课程" value="1"></el-option>
              <el-option label="教师名" value="2"></el-option>
            </el-select>
            <el-button
              @click="getCourseList"
              type="primary"
              plain
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
      </div>
    </el-row>

    <el-row class="content">
      <el-col
        class="out-content"
        :gutter="10"
        :span="8"
        v-for="(item) in courseList"
        :key="item.index"
      >
        <div class="grid-content">
          <el-timeline>
            <el-timeline-item
              color="#0bbd87"
              icon="el-icon-on"
              :timestamp="item.beginTime"
              placement="top"
            >
              <el-card shadow="hover" class="class-content">
                <el-popover placement="top" width="180" trigger="hover">
                  任课老师：
                  <el-tag size="mini" effect="dark" type="warning">{{item.teacherName}}</el-tag>
                  <el-divider></el-divider>开始：
                  <el-tag size="mini" effect="dark" type="warning">{{item.beginTime}}</el-tag>
                  <br />结束：
                  <el-tag size="mini" effect="dark" type="warning">{{item.endTime}}</el-tag>
                  <el-button
                    size="small"
                    class="showCourseDetails"
                    round
                    effect="dark"
                    type="primary"
                    slot="reference"
                  >{{item.courseName}}</el-button>
                </el-popover>

                <div>
                  教室：
                  <el-tag size="mini" effect="dark" type="warning">{{item.classroomName}}</el-tag>
                </div>
                <div class="classes">
                  授课班级：
                  <el-tag size="mini" effect="dark" type="warning">{{item.className}}</el-tag>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-pagination
          @current-change="handleCurrentChange"
          class="page"
          background
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Course",
  data() {
    return {
      searchCondition: {
        classId: "",
        searchParam: "",
        type: ""
      },
      searchDate: [],
      total: 10,
      page: 1,
      size: 6,
      courseList: [],

      // 班级
      classOptions: [
        {
          id: 1,
          className: ""
        }
      ]
    };
  },
  methods: {
    // 获取班级列表
    getAllClassList() {
      this.$http
        .get("class/noAuthorize/all/class")
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.classOptions = data.classesList;
          }
        })
        .catch(resp => {});
    },
    getKey() {
      if (!this.searchCondition.type) {
        this.$message.warning("请先选择查询类别");
      }
    },
    getCourseList() {
      let startTime;
      let endTime;
      if (this.searchDate != null && this.searchDate.length != 0) {
        startTime = JSON.parse(JSON.stringify(this.searchDate[0]));
        endTime = JSON.parse(JSON.stringify(this.searchDate[1]));
      }
      this.$http
        .get("/course/noAuthorize/queryPageOnlyCourse", {
          params: {
            page: this.page,
            limit: this.size,
            searchParam: this.searchCondition.searchParam,
            type: this.searchCondition.type,
            classId: this.searchCondition.classId,
            startTime: startTime,
            endTime: endTime
          }
        })
        .then(resp => {
          let { code, data, msg } = resp.data;
          if (code == 1) {
            console.log(data.pageResult);
            this.courseList = data.pageResult.courseVoList;
            this.total = parseInt(pageResult.total);
          } else if (code == 404) {
            this.courseList = [];
            return this.$message.info(msg);
          } else {
            return this.$message.warning(msg);
          }
        })
        .catch(resp => {});
    },
    handleCurrentChange(currentPage) {
      let startTime;
      let endTime;
      if (this.searchDate[0] && this.searchDate[1]) {
        startTime = JSON.parse(JSON.stringify(this.searchDate[0]));
        endTime = JSON.parse(JSON.stringify(this.searchDate[1]));
      }
      this.$http
        .get("/course/noAuthorize/queryPageOnlyCourse", {
          params: {
            page: currentPage,
            limit: this.size,
            searchParam: this.searchCondition.searchParam,
            type: this.searchCondition.type,
            startTime: startTime,
            endTime: endTime
          }
        })
        .then(resp => {
          let { code, data, msg } = resp.data;
          let courseVo = data.pageResult;
          this.total = parseInt(courseVo.total);
          this.courseList = courseVo.courseVoList;
        })
        .catch(resp => {});
    }
  },
  created() {
    this.getCourseList();
    this.getAllClassList();
  }
};
</script>

<style scoped lang='less'>
.grid-content {
  width: 250px;
  border-radius: 10px;
  .el-timeline {
    .el-timeline-item {
      margin-bottom: 10px;
    }
    padding-right: 0px;
    width: 210px;
    height: 220px;
    .el-card {
      .el-card__body {
        height: 220px;
      }
    }
  }
}

.class-content {
  box-shadow: -15px 20px 10px#909399;
  border-radius: 35px;
  height: 170px;
}
.input-with-select .el-select {
  width: 100px;
}
.up-content {
  margin-top: 20px;
}
.content {
  margin-top: 5px;
  border-radius: 25px;
}
.el-pagination {
  margin-top: 10px;
  margin-left: 310px;
}
.el-tag--primary {
  margin-bottom: 10px;
}
.out-content {
  margin-left: 50px;
  width: 230px;
  margin-top: 20px;
}
.el-tag--primary {
  font-size: 12px;
  margin-top: 20px;
  text-align: center;
}
.showCourseDetails {
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.classes {
  margin-top: 10px;
}
</style>